<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="utf-8">
    <title>esp32cam直播流</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  </head>
  
  <body>
    <div id="app">
      <img id="show" style="width:300px;" />
    </div>
    <script type="text/javascript">new Vue({
        el: '#app',
        data() {
          return {
            websocket: null
          }
        },
        methods: {
          initWebSocket() {
            var that = this
            var wsUri = "ws://101.43.241.226:5765/";
            this.websocket = new WebSocket(wsUri);
            this.websocket.onopen = function(evt) {
              that.onOpen(evt)
            };
            this.websocket.onclose = function(evt) {
              that.onClose(evt)
            };
            this.websocket.onmessage = function(evt) {
              that.onMessage(evt)
            };
            this.websocket.onerror = function(evt) {
              that.onError(evt)
            };
          },
          onOpen(evt) {
            console.log("CONNECTED")
          },
          onClose(evt) {
            console.log("DISCONNECTED")
          },
          onMessage(evt) {
            var reader = new FileReader();
            reader.onload = function(e) {
              this.url = e.target.result;
              var img = document.getElementById("show");
              img.src = this.url;
              console.log(this.url);
            };
            reader.readAsDataURL(evt.data);
          },
          onError(evt) {
            console.log(evt.data)
          }
        },
        mounted() {
          this.initWebSocket();
        }

      })</script>
  </body>

</html>